<template>
  <Card>
    <div class="toolbar">
      <label for="waterFactory">水厂</label>
      <el-select class="select" id="waterFactory" v-model="waterFactory" placeholder="请选择">
        <el-option
          v-for="item in options1"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-date-picker
        v-model="curTime"
        type="date"
        placeholder="时间">
      </el-date-picker>
      <el-button class="my-btn" type="primary">导出</el-button>
    </div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="生产日报" name="first">
        <el-table
          :data="tableData.momentDatas"
          :summary-method="getSummariesDay"
          show-summary>
          <el-table-column
            prop="time"
            label="日期">
          </el-table-column>
          <el-table-column
            label="浊度">
            <el-table-column
              label="进水浊度（NTU）"
              prop="inputTurbidity">
            </el-table-column>
            <el-table-column
              label="出水浊度（NTU）"
              prop="outputTurbidity">
            </el-table-column>
          </el-table-column>
          <el-table-column
            label="加药量">
            <el-table-column
              label="PAC加药量（L）"
              prop="unitConsumption">
            </el-table-column>
            <el-table-column
              label="单耗（mg/L）"
              prop="unitConsumption">
            </el-table-column>
            <el-table-column
              prop="consumptionQuantity"
              label="耗药量（kg）">
            </el-table-column>
          </el-table-column>
          <el-table-column
            label="进出水流量">
            <el-table-column
              label="进水流量（m3/h）"
              prop="inputFlow">
            </el-table-column>
            <el-table-column
              label="累计流量（m3/h）"
              prop="aggregationFlow">
            </el-table-column>
            <el-table-column
              prop="holeReservoirFlow"
              label="山顶水库（m3/h）">
            </el-table-column>
            <el-table-column
              prop="holeReservoirAggFlow"
              label="累计流量（m3）">
            </el-table-column>
            <el-table-column
              prop="centralFlow"
              label="中环网（m3/h）">
            </el-table-column>
            <el-table-column
              prop="centralAggFlow"
              label="累计流量（m3）">
            </el-table-column>
            <el-table-column
              prop="bandFlow"
              label="下环网（m3/h）">
            </el-table-column>
            <el-table-column
              prop="bandAggFlow"
              label="累计流量（m3）">
            </el-table-column>
            <el-table-column
              prop="terminalFlow"
              label="末段（m3/h）">
            </el-table-column>
            <el-table-column
              prop="terminalAggFlow"
              label="累计流量（m3）">
            </el-table-column>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane 
        label="外输日报"          name="second">
        <el-table
          :data="outData.momentDatas"
          :summary-method="getSummariesOut"
          show-summary>
          <el-table-column
            prop="time"
            label="日期">
          </el-table-column>
          <el-table-column>
            <template slot-scope="scope">
              <el-table-column
                label="山顶水库">
                <el-table-column
                  v-for="(item) in scope.row.waterpumpsInfoS"
                  :key="item.waterPumpId"
                  :label="item.name">
                  <el-table-column
                    label="电流">
                    <template slot-scope="scope">
                      <span>{{item.electricity}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="运行时间">
                    <template slot-scope="scope">
                      <span>{{item.runtime}}</span>
                    </template>
                  </el-table-column>
                </el-table-column>
                <el-table-column
                  label="管网压力">
                  <template slot-scope="scope">
                    <span>{{scope.row.pressures[0].pressure}}</span>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column
                label="中环网">
                <el-table-column
                  v-for="(item) in scope.row.waterpumpsInfoZ"
                  :key="item.waterPumpId"
                  :label="item.name">
                  <el-table-column
                    label="电流">
                    <template slot-scope="scope">
                      <span>{{item.electricity}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="运行时间">
                    <template slot-scope="scope">
                      <span>{{item.runtime}}</span>
                    </template>
                  </el-table-column>
                </el-table-column>
                <el-table-column
                  label="管网压力">
                  <template slot-scope="scope">
                    <span>{{scope.row.pressures[1].pressure}}</span>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column
                label="下环网">
                <el-table-column
                  v-for="(item) in scope.row.waterpumpsInfoZ"
                  :key="item.waterPumpId"
                  :label="item.name">
                  <el-table-column
                    label="电流">
                    <template slot-scope="scope">
                      <span>{{item.electricity}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="运行时间">
                    <template slot-scope="scope">
                      <span>{{item.runtime}}</span>
                    </template>
                  </el-table-column>
                </el-table-column>
                <el-table-column
                  label="管网压力">
                  <template slot-scope="scope">
                    <span>{{scope.row.pressures[2].pressure}}</span>
                  </template>
                </el-table-column>
              </el-table-column>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane
        label="生产月报"
        name="third">
        <el-table
          class="my-table"
          :data="mouthData">
          <el-table-column>
            <template slot-scope="scope">
              <el-table-column
                prop="productWater"
                label="产水量（m3）">
              </el-table-column>
              <el-table-column
                prop="turnWater"
                label="转水量（m3）">
              </el-table-column>
              <el-table-column
                prop="averageWater"
                label="平均日产水量（m3）">
              </el-table-column>
              <el-table-column
                prop="maxWater"
                label="最高日产水量（m3）">
              </el-table-column>
              <el-table-column
                prop="minWater"
                label="最低日产水量（m3）">
              </el-table-column>
              <el-table-column
                prop="pac"
                label="PAC耗药量（kg）">
              </el-table-column>
              <el-table-column
                prop="averagePac"
                label="平均日PAC耗氧量（kg）">
              </el-table-column>
              <el-table-column
                prop="runtime"
                label="运行时间（h）">
              </el-table-column>
              <el-table-column label="平均泵压（m）">
                <el-table-column
                  v-for="(item) in scope.row.averagePressure"
                  :key="item.name"
                  :label="item.name">
                  <template slot-scope="scope">
                    <span>{{item.pressure}}</span>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column
                prop="averageCount"
                label="平均日运行泵数（台）">
              </el-table-column>
              <el-table-column
                prop="worktime"
                label="工作时长(h)">
              </el-table-column>
            </template>
          </el-table-column>
        </el-table>
        <el-table
          class="my-table"
          :data="mouthSummaryData">
          <el-table-column
            prop="topWater"
            label="山顶水库供水量（m3）">
          </el-table-column>
          <el-table-column
            prop="middleWater"
            label="中环网供水量（m3）">
          </el-table-column>
          <el-table-column
            prop="downWater"
            label="下环网供水量（m3）">
          </el-table-column>
          <el-table-column
            prop="lastWater"
            label="末段供水量（m3）">
          </el-table-column>
          <el-table-column
            prop="totalWater"
            label="总供水量（m3）">
          </el-table-column>
          <el-table-column
            prop="averageWater"
            label="日平均供水量（m3）">
          </el-table-column>
          <el-table-column
            prop="averageWater"
            label="山顶水库平均压力（MPa）">
          </el-table-column>
          <el-table-column
            prop="topPressure"
            label="上环网平均压力（m）">
          </el-table-column>
          <el-table-column
            prop="upPressure"
            label="下环网平均压力（m）">
          </el-table-column>
        </el-table>
        <el-table
          class="my-table"
          :data="mouthWorkData">
          <el-table-column
            prop="topWater"
            label="其他工作完成情况">
            <template slot-scope="scope">
              <span>{{scope.row.content}}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </Card>
</template>

<script>
import Card from '../../components/Card.vue'
import moment from 'moment'

export default {
  name: 'ProductionReport',
  components: {
    Card
  },
  data() {
    return {
      activeName: 'first',
      waterworksId: 2,
      curTime: moment().subtract(1, 'M').format('YYYY-MM-DD'),
      waterFactory: '',
      options1: [{
        value: '0',
        label: '三坪水厂'
      }, {
        value: '1',
        label: '第五净化水厂'
      }, {
        value: '2',
        label: '第六净化水厂'
      }, {
        value: '3',
        label: '第二净化水厂'
      }],
      outData: {
        momentDatas: [{
          time: '2018-10-10 0:05:00',
          waterpumpsInfoS: [{
            name: '1#泵',
            waterPumpId: '110',
            electricity: '120',
            runtime: '110'
          }, {
            name: '2#泵',
            waterPumpId: 111,
            electricity: '120',
            runtime: '110'
          }, {
            name: '3#泵',
            waterPumpId: 112,
            electricity: '120',
            runtime: '110'
          }, {
            name: '4#泵',
            waterPumpId: 113,
            electricity: '120',
            runtime: '110'
          }, {
            name: '5#泵',
            waterPumpId: 114,
            electricity: '120',
            runtime: '110'
          }],
          waterpumpsInfoZ: [{
            name: '1#泵',
            waterPumpId: '110',
            electricity: '120',
            runtime: '110'
          }, {
            name: '2#泵',
            waterPumpId: 111,
            electricity: '120',
            runtime: '110'
          }, {
            name: '3#泵',
            waterPumpId: 112,
            electricity: '120',
            runtime: '110'
          }],
          waterpumpsInfoX: [{
            name: '1#泵',
            waterPumpId: '110',
            electricity: '120',
            runtime: '110'
          }, {
            name: '2#泵',
            waterPumpId: 111,
            electricity: '120',
            runtime: '110'
          }, {
            name: '3#泵',
            waterPumpId: 112,
            electricity: '120',
            runtime: '110'
          }],
          pressures: [{
            name: 90,
            pressure: 800
          }, {
            name: 90,
            pressure: 800
          }, {
            name: 90,
            pressure: 800
          }]
        }],
        gatherDatas: {
          waterpumpsInfoS: [{
            name: '1#泵',
            waterPumpId: '110',
            electricity: '120',
            runtime: '110'
          }, {
            name: '2#泵',
            waterPumpId: 111,
            electricity: '120',
            runtime: '110'
          }, {
            name: '3#泵',
            waterPumpId: 112,
            electricity: '120',
            runtime: '110'
          }, {
            name: '4#泵',
            waterPumpId: 113,
            electricity: '120',
            runtime: '110'
          }, {
            name: '5#泵',
            waterPumpId: 114,
            electricity: '120',
            runtime: '110'
          }],
          waterpumpsInfoZ: [{
            name: '1#泵',
            waterPumpId: '110',
            electricity: '120',
            runtime: '110'
          }, {
            name: '2#泵',
            waterPumpId: 111,
            electricity: '120',
            runtime: '110'
          }, {
            name: '3#泵',
            waterPumpId: 112,
            electricity: '120',
            runtime: '110'
          }],
          waterpumpsInfoX: [{
            name: '1#泵',
            waterPumpId: '110',
            electricity: '120',
            runtime: '110'
          }, {
            name: '2#泵',
            waterPumpId: 111,
            electricity: '120',
            runtime: '110'
          }, {
            name: '3#泵',
            waterPumpId: 112,
            electricity: '120',
            runtime: '110'
          }],
          pressures: [{
            name: 90,
            pressure: 800
          }, {
            name: 90,
            pressure: 800
          }, {
            name: 90,
            pressure: 800
          }]
        }
      },
      tableData: {
        momentDatas: [{
          time: '2018-10-10 0:05:00',
          inputTurbidity: 100,
          outputTurbidity: '110',
          unitConsumption: 10,
          consumptionQuantity: 120,
          inputFlow: '110',
          aggregationFlow: 900,
          holeReservoirFlow: 90,
          holeReservoirAggFlow: 800,
          centralFlow: 120,
          centralAggFlow: 1000,
          bandFlow: 100,
          bandAggFlow: 900,
          terminalFlow: 80,
          terminalAggFlow: 800
        }],
        gatherDatas: [100, 110, 10, 120, 110, 900, 90, 800, 120, 1000, 100, 900, 80, 800]
      },
      mouthData: [{
        productWater: 100,
        turnWater: 120,
        averageWater: 110,
        maxWater: 120,
        minWater: 100,
        pac: 200,
        averagePac: 150,
        runtime: 20,
        averagePressure: [{
          name: '1#-5#',
          pressure: 200
        }, {
          name: '6#-8#',
          pressure: 200
        }, {
          name: '9#-11#',
          pressure: 200
        }],
        averageCount: 20,
        worktime: 20
      }],
      mouthSummaryData: [{
        topWater: 200,
        middleWater: 100,
        downWater: 120,
        lastWater: 200,
        totalWater: 150,
        averageWater: 200,
        topPressure: 10,
        upPressure: 20,
        downPressure: 15
      }],
      mouthWorkData: [{
        content: '三坪水厂1#泵测试完成，历时5小时'
      }]
    }
  },
  methods: {
    getSummariesOut (params) {
      const { columns, data } = params
      const { waterpumpsInfoS, waterpumpsInfoZ, waterpumpsInfoX, pressures } = this.outData.gatherDatas
      let waterpumpsInfo = waterpumpsInfoS.concat(waterpumpsInfoZ, waterpumpsInfoX)
      let sums = ['统计']
      waterpumpsInfo.forEach(item => {
        sums.push(item.electricity)
        sums.push(item.runtime)
      })
      pressures.forEach(item => {
        sums.push(item.pressure)
      })
      return sums
    },
    getSummariesDay (params) {
      const { columns, data } = params
      return ['统计', ...this.tableData.gatherDatas]
    }
  }
}
</script>

<style lang="sass" scoped>
.my-table
  margin-bottom: 10px
  /deep/ .cell
    text-align: left!important
.toolbar
  position: absolute
  top: 15px
  right: 15px
</style>

